/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<!--
 * @Author: zhb
 * @Date: 2020-10-14
 * @Description: 平滑算子表单配置
 -->
<template>
    <div class="data-set operate_form">
        <sf-form ref="smoothForm"
                 class="drawer-form__container"
                 :label-width="80">
            <sf-form-item class="form-item--first smooth-list-form">
                <div class="smooth-list">
                    <div v-for="(item,index) in factors"
                         :key="index"
                         class="smooth__item">
                        <sf-fieldlabel>
                            <lang>平滑</lang>{{ index+1 }}
                        </sf-fieldlabel>
                        <sf-select v-model="item.name"
                                   :default-width="183"
                                   :allow-search="true"
                                   :allow-blank="false"
                                   class="m-r5"
                                   :default-disabled="disabledStatus"
                                   :options="fieldList" />
                        <sf-textfield
                            ref="fieldName"
                            v-model="item.value"
                            :default-width="112"
                            :allow-blank="false"
                            :validator="_factorsValidator"
                            :default-disabled="disabledStatus"
                            :placeholder="_('请输入平衡因子')"
                            :blur-trim="true" />
                        <span class="icon iconfont iconqingkong remove"
                              @click="_removeSmoothItem(index)"></span>
                    </div>
                </div>
            </sf-form-item>
            <sf-button
                icon-cls="icon-comp-add"
                class="add-smooth__btn"
                @click="_addSmoothBy">
                新增
            </sf-button>
        </sf-form>
        <div v-if="!disabledStatus && showOperateBtn"
             class="add-operate__btn">
            <sf-button-primary
                class="btn-primary m-r10"
                @click.native="_submit">
                <lang>确定</lang>
            </sf-button-primary>
            <sf-button @click.native="_cancel">
                <lang>取消</lang>
            </sf-button>
        </div>
    </div>
</template>

<script lang=ts>
import { Component, Vue, Ref } from 'vue-property-decorator';
import { deepClone } from 'src/util/deep_clone';
import {
    SMOOTH_DATA,
    ADD_DEFAULT_WIDTH,
    DEFAULT_WIDTH
} from 'src/home/mod_cluster/project_manager/feature_manager/const_data';
import { SfForm } from '@sxf/sf-vue-component';

@Component({
    name: 'SmoothForm'
})
export default class SmoothForm extends Vue {
    @Ref() smoothForm!: SfForm

    formData = { ...SMOOTH_DATA }
    factors = [{
        name:'',
        value:''
    }]
    disabledStatus = false
    showOperateBtn = false
    fieldList = []
    timeFieldList = []
    get fieldWidth () {
        return this.showOperateBtn ? DEFAULT_WIDTH : ADD_DEFAULT_WIDTH;
    }

    _removeSmoothItem (index: number) {
        this.factors.splice(index, 1);
    }
    _addSmoothBy () {
        this.factors.push({
            name:'',
            value:''
        });
    }
    _factorsValidator (value: string) {
        let datasetNameReg = /^0\.[0-9]{0,6}$/;
        if (!datasetNameReg.test(value)) {
            return _('只能输入0-1之间的小数，而且小数位不能超过6位');
        }
        return true;
    }

    reset () {
        this.formData = deepClone(SMOOTH_DATA);
        this.clearInvalidMsg();
    }
    clearInvalidMsg () {
        this.$nextTick(() => {
            this.smoothForm.clearInvalid();
        });
    }
    getJsonValue () {
        let factors = this.factors;

        // let list = [];
        let factorsObj = {};
        for (let i = 0; i < factors.length; i++) {
            factorsObj[factors[i].name] = factors[i].value;
        }
        // @ts-ignore
        this.formData.factors = JSON.stringify(factorsObj);
        return this.formData;
    }
    _submit () {
        let factors = this.factors;

        // let list = [];
        let factorsObj = {};
        for (let i = 0; i < factors.length; i++) {
            factorsObj[factors[i].name] = factors[i].value;
        }
        // @ts-ignore
        this.formData.factors = JSON.stringify(factorsObj);
        this.$emit('operate-submit', this.formData);
    }
    _cancel () {
        this.$emit('operate-cancel');
    }
    setFieldList (data) {
        this.fieldList = data;
        this.timeFieldList = data;
    }

    isValid () {
        let factorName = this.factors.map(item=>item.name);
        if ((new Set(factorName)).size !== factorName.length) {
            this.$warn(_('平滑字段不能相同'), { autoHide: true });
            return false;
        }
        return this.smoothForm.isValid();
    }
};
</script>

<style lang="less">
.operate_form {
    .add-smooth__btn{
        margin-left: 88px;
    }
    .smooth-list{
        flex: 1;
        margin-left: 4px;
        .smooth__item{
            margin-bottom: 10px;
            .remove{
                margin-left: 4px;
                &:hover{
                    color: #204ed9;
                }
            }
            &:first-child{
                .remove{
                    display: none;

                }
            }
        }
    }
}

</style>

